<template>
  <div>
    <a-upload
      :disabled="disabled"
      list-type="picture-card"
      :file-list="fileList"
      :customRequest="customRequest"
      :beforeUpload="beforeUpload"
      :remove="handleRemove"
      @preview="handlePreview">
      <div v-if="fileList.length < maxSize">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          选择图片
        </div>
      </div>
    </a-upload>
    <a-modal width="960px" v-model="previewVisible" :footer="null">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { uplaodImg } from '@/api/common.js'
export default {
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    maxSize: {
      type: Number,
      default: 1
    },
    // 图片地址，多个按；隔开
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      imgs: '',
      uploading: false,
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  watch: {
    value: function (val, oldVal) {
      this.imgs = val
    },
    imgs: function (val) {
      this.init()
    }
  },
  mounted () {
    this.imgs = this.value
  },
  methods: {
    init () {
      if (!this.imgs || this.imgs.length == 0) {
        this.fileList.splice(0)
        return false
      } else {
        
        const urlList = this.imgs.split(';')
        const fileList = []
        urlList.forEach((item) => {
          const fileUrl = item
          const fileName = fileUrl.split('/').pop()
          fileList.push({
            uid: Date.parse(new Date()),
            name: fileName,
            status: 'done',
            url: fileUrl
          })
        })
        this.fileList.splice(0, this.fileList.length, ...fileList)
      }
    },
    beforeUpload (file) {
      if (file.type === 'image/png' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/JPEG' ||
        file.type === 'image/JPG' ||
        file.type === 'image/PNG') {
        if (file.size <= 1024 * 1024 * 1) {
          return true
        } else {
          this.$message.error('仅支持1MB以内的图片上传！')
          return false
        }
      } else {
        this.$message.error('仅支持jpeg，jpg及png格式的图片上传！')
        return false
      }
    },
    customRequest (data) {
      let file = data.file
      let param = {
        type: 'news'
      }
      data.onProgress()
      uplaodImg(param, file).then(res => {
        let href = window.location.href
        file.url = href.indexOf('localhost') > -1 ? 'http://credit-dev.is184.gzd.pub' + res.data : res.data
        file.dataUrl = res.data
        data.onSuccess() //上传成功
        this.$forceUpdate()
        this.$nextTick(() => {
          this.handleChange(this.fileList)
        })
        this.fileList.push(file)
        
      }).catch((error) => {
        data.onError() //上传失败
      })
      
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      this.fileList.splice(index, 1)
      this.handleChange(this.fileList)
    },
    handlePreview (file) {
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange (fileList) {
      const urlList = []
     fileList.forEach((item) => {
        if (item.url) {
          urlList.push(item.url)
        }
      })
      const imgs = urlList.join(';')
      this.$emit('change', fileList)
      this.$emit('modelValue', imgs)
    }
  }
}
</script>

<style>

</style>
